<template>
  <van-cell-group>
    <van-popup v-model="popupVis" position="bottom" round get-container="body">
      <van-area
        :title="title"
        :area-list="areaList"
        :columns-num="num"
        :columns-placeholder="['请选择', '请选择', '请选择']"
        @confirm="onConfirm"
        @cancel="onCancel"
        :value="value"
      />
    </van-popup>
    <van-cell
      :required="required ? required : true"
      :title="title"
      is-link
      @click="popupVis = true"
      :value="area"
    />
  </van-cell-group>
</template>
<script>
  import { areaList } from '@vant/area-data'

  export default {
    props: ['value', 'title', 'num', 'onChoose', 'initArea', 'required'],
    data: function () {
      return {
        areaList: areaList,
        area: '',
        popupVis: false,
      }
    },
    methods: {
      onConfirm: function (list) {
        this.area = ''
        this.area += list[0] ? list[0].name : ''
        this.area += list[1] ? list[1].name : ''
        this.area += list[2] ? list[2].name : ''
        if (this.onChoose) {
          this.onChoose(list)
        }
        this.popupVis = false
      },
      onCancel: function () {
        this.popupVis = false
      },
    },
    watch: {
      initArea: function () {
        this.area = this.initArea
      },
    },
    mounted: function () {
      if (this.initArea) this.area = this.initArea
    },
  }
</script>
